<script lang="ts">
  import { computed, defineComponent, ref, unref, watchEffect } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useAppStore } from '@/store/modules/app';

  export default defineComponent({
    name: 'goods_list',
    props: {
      filteredProducts: {
        type: Array,
        default: [],
      },
    },
    setup () {
      const router = useRouter();
      const goPage = (data, query) => {
        router.push({
          path: data,
          query: {
            goodsId: query
          }
        });
      }
      return {
        goPage
      };
    },
  });
</script>

<template>
  <!-- 商品列表 -->
  <div class="goods_list">
    <div class="goods_list_item" v-for="(product,index) in filteredProducts" :key="product.id">
      <div class="img">
        <img :src="product.image" alt="" @click="goPage('/goodsDetail',product.id)" style="object-fit:fill" />
        <div class="add-to-cart">
          <van-button round @click="goPage('/goodsDetail',product.id)">{{$t('home.preview')}}</van-button>
        </div>
      </div>
      <div class="des">
        <h3>{{product.title}}</h3>
        <div>${{product.price}}</div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .goods_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
    margin-top: 20px;

    .goods_list_item {
      background: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
      transition: all 0.4s ease;
      display: flex;
      flex-direction: column;

      .des {
        padding: 0 0 10px 10px;
      }

      .img {
        position: relative;

        .add-to-cart {
          opacity: 0;
          width: 100%;
          background-color: rgba(0, 0, 0, 0.08);
          padding: 6px;
          text-align: center;
          position: absolute;
          bottom: 0;
          left: 0;
        }

      }

      img {
        width: 100%;
        height: 350px;
        object-fit: cover;
        transition: transform 0.5s ease;
      }

      &:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
      }
    }

    .goods_list_item:hover .add-to-cart {
      opacity: 1;
      animation: bounceIn 0.7s ease-out forwards;
      pointer-events: auto;
    }

  }
</style>